<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./lib/element/index.css" />
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
    <title>element——tabs切换拦截</title>
  </head>
  <body>
    <div id="app" v-cloak>
      <el-tabs v-model="activeName" :before-leave="leaveTab">
        <el-tab-pane label="零" name="0">
          <el-input
            v-model="txt0"
            placeholder=""
            @change="isChange=true"
          ></el-input>
        </el-tab-pane>
        <el-tab-pane label="一" name="1">
          <el-input
            v-model="txt1"
            placeholder=""
            @change="isChange=true"
          ></el-input>
        </el-tab-pane>
        <el-tab-pane label="二" name="2">
          <el-input
            v-model="txt2"
            placeholder=""
            @change="isChange=true"
          ></el-input>
        </el-tab-pane>
        <el-tab-pane label="三" name="3">
          <el-input
            v-model="txt3"
            placeholder=""
            @change="isChange=true"
          ></el-input>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" @click="isChange=false"></el-button>
    </div>
  </body>

  <script src="./lib/vue.js"></script>

  <script src="./lib/element/index.js"></script>

  <!-- 引入组件库 -->
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        activeName: "0",
        txt0: "",
        txt1: "",
        txt2: "",
        txt3: "",
        isChange: false,
      },
      methods: {
        leaveTab(activeName, oldActiveName) {
          // do something
          console.log(activeName, oldActiveName);

          if (this.isChange) {
            this.changeD(activeName, oldActiveName);
            return false;
          }
        },
        changeD(activeName, oldActiveName) {
          console.log(activeName, oldActiveName);
          this.$confirm("是否保存修改", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then((res) => {
              // 你可以在这儿做些操作
              console.log(res);
              this.isChange = false;
              this.activeName = activeName;
            })
            .catch((err) => {
              // 你可以在这儿做些操作
              console.log(err);
            });
        },
      },
    });
  </script>
</html>
